<template>
	<!-- 职位详情 -->
	<view class="content">
		<view style="height: 1rpx;"></view>
		
		<!-- 职位名称卡片 -->
		<job-name ref="jobName" :info="jobNameCardObj"></job-name>
		<!-- 职位信息 -->
		<view class="jobInfo">
			<view class="childBox" v-for="(item,index) in infoList" :key="index">
				<image :src="item[0]" mode="scaleToFill"></image>
				<view class="item">
					<span>{{item[1]}}</span><br>
					<span>{{item[2]}}</span>
				</view>
			</view>
		</view>
		<!-- 职位描述 -->
		<view class="jobDescription">
			<span>职位描述</span>
			<view class="text">
				<span>
					{{jobDescription}}
				</span>
			</view>
		</view>
		<!-- 招聘者 -->
		<view class="boss">
			<span>招聘者</span>
			<confirm :merchantObj="merchantObj"></confirm>
		</view>
		<!-- 相似推荐 -->
		<view class="recommend">
			<view class="recommend-title flex-center">
				<image src="/static/img/recommond_title.png" mode=""></image>
			</view>
			<!-- 职位卡片 -->
			<Jobcard v-for="(item,index) in recList" :key="index" :jobInfo="item"></Jobcard>
		</view>
		
		<!-- 底部 -->
		<view class="bottom" v-if="enrollStatus==0 || enrollStatus==7">
			<view class="zaixiangoutong">
				<span>在线沟通</span>
			</view>
			<view class="lijibaoming" @click="show=1">
				<span>立即报名</span>
			</view>
		</view>
		<view class="bottom" v-else>
			<view class="zaixiangoutong" @click="cancel">
				<span>取消报名</span>
			</view>
			<view class="lijibaoming" @click="show=1">
				<span>联系商家</span>
			</view>
		</view>
		
		<!-- 弹出层1 -->
		<view class="" @touchmove.stop.prevent="() => { }">
			<u-popup :show="show===1" :round="10" mode="bottom" @close="show=0">
				<view class="submit">
					<view class="title">
						<span>此职位需要你以下信息</span>
						<image src="/static/img/close@2x.png" alt="" @click="show=0" mode="scaleToFill"></image>
					</view>
					<view class="birthday">
						<span>生日</span>
						<view class="val" @click="getBirthday">
							{{birthday==''?'请选择出生年月日':birthday}}
							<image src="/static/img/jobDetail/Frame222@2x.png" mode="scaleToFill"></image>
							<view class="" @touchmove.stop.prevent="() => { }">
								<uDatetimePicker
										:show="datePickerShow"
										v-model="now"
										mode="date"
										@confirm="dateConfirm"
										@cancel="datePickerClose"
										:minDate="252432000000"
								></uDatetimePicker>
							</view>
							
						</view>
					</view>
					<!-- 学历样式跟生日样式一模一样 -->
					<view class="birthday">
						<span>学历</span>
						<view class="val" @click="getEducation">
							{{education==''?'请选择学历':education}}
							<image src="/static/img/jobDetail/Frame222@2x.png" mode="scaleToFill"></image>
							<uPicker :show="educationShow" :columns="educationList" 
							@confirm="educationConfirm" @cancel="educationPickerClose"
							:defaultIndex="[2]">
							</uPicker>
						</view>
						
					</view>
					<view class="submitButton" @click="show=2">
						<span>提交并确认报名</span>
					</view>
				</view>
			</u-popup>
		</view>
		
		
		<!-- 弹出层2 -->
		<view class="" @touchmove.stop.prevent="() => { }">
			<u-popup :show="show===2" :round="10" mode="bottom" @close="show=0">
				<view class="submit2">
					<view class="title">
						<span>温馨提示</span>
						<image src="/static/img/close@2x.png" alt="" @click="show=0" mode="scaleToFill"></image>
					</view>
					<view class="alert">
						<span>工作日期</span><br>
						<span>根据个人时间安排</span>
					</view>
					<view class="alert">
						<span>工作地点</span><br>
						<span>{{infoList[2][2]}}</span><br>
						<span id="red">{{infoList[2][1]}}</span>
					</view>
					<view class="alert">
						<span>安全小贴士</span><br>
						<span>兼职过程中请拒绝向商家缴纳任何费用</span>
					</view>
					<view class="submitButton" @click="signup">
						<span>确认报名</span>
					</view>
				</view>
			</u-popup>
		</view>
			
	</view>
</template>

<script>
	import Jobcard from '@/components/jobCard.vue'
	import jobName from '@/subpageB/components/jobName.vue'
	import confirm from '@/subpageB/components/confirm.vue'
	import uPicker from '@/subpageB/uview-ui/components/u-picker/u-picker.vue'
	import uDatetimePicker from '@/subpageB/uview-ui/components/u-datetime-picker/u-datetime-picker.vue'
	import {getFlatternDistance} from '@/common/getFlatternDistance'
	
	export default {
		data() {
			return {
				postId:'',
				jobNameCardObj:{},
				merchantObj:{},
				infoList:[
					['/static/img/jobDetail/Group333@2x.png','工作日期','依据个人时间安排'],
					['/static/img/jobDetail/Group324@2x.png','工作时段','不限'],
					['/static/img/jobDetail/Group330@2x.png','工作地点：距我1.11km','东莞市南城保利都汇大厦'],
					['/static/img/jobDetail/Group439@2x.png','职位要求','限18岁以上57岁以下'],
					['/static/img/jobDetail/Frame@2x.png','其他福利','五险一金、下午茶']
				],
				enrollStatus:1,	//报名状态
				jobDescription:'工作日期:依据个人时间安排;工作时段:不限;',
				bossName:'招聘者名称',
				show:0,					//控制弹出层
				
				now:Number(new Date()), //当前时间
				birthday:'',			//生日
				datePickerShow:false,	//日期选择器
				
				education:'',			//学历
				educationShow:false		,//学历选择器
				educationList:[['博士','硕士','本科','专科','高中及以下']]	,//需要是二维数组
				recList: [],//推荐职位
			}	
		},
		components:{
			Jobcard,
			jobName,
			confirm,
			uPicker,
			uDatetimePicker
		},
		onLoad(options) {
			console.log(options);
			this.postId=options.postId
			
			this.$store.dispatch('initDic').then(()=>{
				let source=NaN
				//#ifdef H5
				source=1
				//#endif
				//#ifdef MP-WEIXIN
				source=2
				//#endif
				//#ifdef MP-ALIPAY
				source=3
				//#endif
				this.$http.request({
					url:'/post/detail',
					data:{
						source:source,
						postId:this.postId,
					}
				}).then((result)=>{
					let res=result.data
					console.log('响应结果',res);
					this.jobNameCardObj={
						bizLiftDesc:res.data.bizLiftDesc,
						collected:res.data.collected,
						enrollAvatars:res.data.enrollAvatars,
						enrollNoDesc:res.data.enrollNoDesc,
						postTitle:res.data.postTitle,
						priceDesc:res.data.priceDesc,
						tags:res.data.tags,
						postId:res.data.postId
					}
					this.$refs.jobName.setCollection(res.data.collected)
					this.enrollStatus=res.data.enrollStatus
					
					this.infoList[0][2]=res.data.workDate
					this.infoList[1][2]=res.data.workHour
					this.infoList[2][2]=res.data.locationDesc
					this.infoList[2][1]='工作地点：距我'+getFlatternDistance(res.data.lat,res.data.lng)+'km'
					this.infoList[3][2]=res.data.workRequireDesc
					
					this.jobDescription=res.data.workContent
					this.merchantObj={
						entId:res.data.entId,
						merchantLogo:res.data.merchantLogo,
						merchantName:res.data.merchantName,
						merchantType:res.data.merchantType,
					}
					this.recList = res.data.recommends
					
					
				})
			})
			
			
		},
		methods: {
			dateConfirm(date){
				//console.log(this.formatDate(date.value));
				this.birthday=this.formatDate(date.value).toString()
				this.datePickerShow=false;
			},
			datePickerClose(){
				this.datePickerShow=false
			},
			formatDate(time){
			    var date = new Date(time);
			 
			    var year = date.getFullYear(),
			        month = date.getMonth() + 1,//月份是从0开始的
			        day = date.getDate();
			    var newTime = year + '-' +
			                month + '-' +
			                day ;
			    return newTime;         
			},
			
			educationConfirm(val){
				this.education=val.values[0][val.indexs[0]];
				this.educationShow=false;
			},
			educationPickerClose(){
				this.educationShow=false;
			},
			
			
			getBirthday(){
				//支付宝小程序的选择方式，因为<u-picker>不兼容支付宝小程序
				//#ifdef MP-ALIPAY
				let that=this
				my.datePicker({
				  currentDate: this.formatDate(this.now),
				  startDate: '1900-1-1',
				  endDate: this.formatDate(this.now),
				  success: (res) => {
					that.birthday=res.date
				  },
				});
				// #endif
				
				//#ifndef MP-ALIPAY
				this.datePickerShow=true;
				//#endif
			},
			getEducation(){
				//支付宝小程序的选择方式，因为<u-picker>不兼容支付宝小程序
				//#ifdef MP-ALIPAY
				let that=this;
				my.optionsSelect({
				  title: "请选择您的学历",
				  optionsOne: this.educationList[0],
				  selectedOneIndex: 2,
				  success(res) {
					that.education=res.selectedOneOption
				  }
				});
				//#endif
				//#ifndef MP-ALIPAY
				this.educationShow=true;
				//#endif
			},
			
			//报名
			signup(){
				this.$http.request({
					url:'/enroll/unify',
					data:{
						manageType:1,
						pid:this.postId
					}
				}).then(result=>{
					let res = result.data
					uni.showToast({
						title: '报名成功',
						icon: 'none'
					})
					console.log(res);
					this.enrollStatus=1
					this.show=0
				})
			},
			//取消报名
			cancel(){
				this.$http.request({
					url:'/enroll/unify',
					data:{
						manageType:7,
						pid:this.postId
					}
				}).then(result=>{
					let res = result.data
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					})
					this.enrollStatus=0
					console.log(res);
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	
	.content{
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-color: #F3F7F8;
		padding-bottom: 200rpx;
		
		
		.jobInfo{
			width: 686rpx;
			margin: 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			.childBox{
				display: flex;
				padding-top: 20rpx;
				padding-left: 32rpx;
				padding: 20rpx 32rpx;
				image{
					width: 40rpx;
					height: 40rpx;
					vertical-align: 36rpx;
				}
				.item{
					display: inline-block;
					margin-left: 32rpx;
					span:nth-of-type(1){
						font-size: 14px;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 450;
						color: #001A18;
					}
					span:nth-of-type(2){
						font-size: 12px;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #505E5C;
						line-height: 14px;
					}
				}
			}
		}
	
		.jobDescription{
			>span{
				margin-left: 32rpx;
				font-size: 14px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
			}
			.text{
				padding: 32rpx;
				width: 622rpx;
				min-height: 136rpx;
				margin: 32rpx;
				background: #FFFFFF;
				border-radius: 8px;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #99A3A3;
			}
		}
		
		.boss{
			margin-bottom: 72rpx;
			>span{
				margin-left: 32rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
			}
			
		}
	
		.bottom{
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 160rpx;
			background: #FFFFFF;
			box-shadow: 0px -1px 2px 0px rgba(0,0,0,0.0400);
			
			.zaixiangoutong{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 260rpx;
				height: 96rpx;
				margin-right: 20rpx;
				background: #F3F7F8;
				border-radius: 8px 8px 8px 8px;
				font-size: 16px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #001A18;
			}
			
			.lijibaoming{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 406rpx;
				height: 96rpx;
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color:#FFFFFF;
				background: $my-color;
				border-radius: 8px 8px 8px 8px;
			}
		}
	 
		.submit{
			width: 750rpx;
			height: 668rpx;
			background: #FFFFFF;
			border-radius: 8px 8px 0px 0px;
			.title{
				margin-left: 170rpx;
				padding: 32rpx;
				
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
				
				image{
					margin-left: 100rpx;
					width: 50rpx;
					height: 50rpx;
					vertical-align: -14rpx;
				}
			}
			
			.birthday{
				>span{
					margin: 0 32rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #001A18;
				}
				.val{
					position: relative;
					display: flex;
					align-items: center;
					margin: 24rpx 32rpx;
					padding: 0 32rpx;
					width: 622rpx;
					height: 100rpx;
					background: #F3F7F8;
					border-radius: 8px 8px 8px 8px;
					
					image{
						position: absolute;
						right: 40rpx;
						width: 12rpx;
						height: 20rpx;
					}
				}
			}
		}
	
		.submit2{
			width: 750rpx;
			height: 668rpx;
			background: #FFFFFF;
			border-radius: 8px 8px 0px 0px;
			.title{
				margin-left: 270rpx;
				padding: 32rpx;
				
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
				
				image{
					margin-left: 210rpx;
					width: 50rpx;
					height: 50rpx;
					vertical-align: -14rpx;
				}
			}
			
			.alert{
				margin-left: 32rpx;
				margin-bottom: 32rpx;
				span:nth-of-type(1){
					font-size: 14px;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #001A18;
				}
				span:nth-of-type(2){
					font-size: 14px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #505E5C;
				}
				#red{
					font-size: 14px;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF5F58;
				}
			}
		}
		.submitButton{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 686rpx;
				height: 96rpx;
				margin: 32rpx;
				background: $my-color;
				border-radius: 8px 8px 8px 8px;
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
	
	}
	
	.recommend-title image {
		width: 424rpx;
		height: 44rpx;
	}
</style>
